<template>
	<view>
		<view class="head">
			<u-avatar src="../../static/head.png"></u-avatar>
			<view class="f-36" style="color: #FFFFFF;">{{username}}</view>
		</view>
		<u-grid :border=false :col="2" class="content">
			<u-grid-item @click="jumpreleaseList">
				<u-icon name="order" :size="90" color="#e5e515"></u-icon>
				<view class="grid-text">我的发布</view>
			</u-grid-item>
			<u-grid-item @click="jumpHousList">
				<u-icon name="trash" :size="90" color="#e87061"></u-icon>
				<view class="grid-text">我的下架</view>
			</u-grid-item>
			<u-grid-item @click="jumpUserList" v-if='roleId == 1'>
				<u-icon name="account-fill" :size="90" color="#73c5f1"></u-icon>
				<view class="grid-text">用户管理</view>
			</u-grid-item>
			<u-grid-item @click="updatePassword">
				<u-icon name="setting-fill" :size="90" color="#cdcdcd"></u-icon>
				<view class="grid-text">修改密码</view>
			</u-grid-item>
		</u-grid>
		<u-button class="logout content" type="warning" @click="loginOut">退出</u-button>
		<u-popup v-model="passwordPopup" mode="center" closeable>
			<view class="dis-flex flex-dir-column flex-x-center flex-y-center">
				<view class="passwordFrom">
					<u-form :model="form" ref="uForm">
						<u-form-item label="旧密码" prop="oldPassword" class='f-24' label-width='110' label-align='center'>
							<u-input v-model="form.oldPassword" type='password' />

						</u-form-item>
						<u-form-item label="新密码" prop="newPassword" class='f-24' label-width='110' label-align='center'>
							<u-input v-model="form.newPassword" type='password' />
						</u-form-item>
						<u-form-item label="确认密码" prop="confirmNewPassword" class='f-24' label-width='140' label-align='center'>
							<u-input v-model="form.confirmNewPassword" type='password' />
						</u-form-item>
					</u-form>
				</view>
				<u-button size='medium' class='sumbit' @click='sumbit'>确定</u-button>
			</view>
		</u-popup>
		<!-- 消息提示 -->
		<u-toast ref="uToast" />
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabbar: '',
				username: '',
				headStyle: {
					fontSize: '38rpx'
				}, //标签样式
				passwordPopup: false,
				form: {
					oldPassword: '',
					newPassword: '',
					confirmNewPassword: '',
				},
				rules: {
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: ['blur']
					}],
					newPassword: [{
						required: true,
						message: '请输入新密码',
						trigger: ['blur']
					}],
					confirmNewPassword: [{
						required: true,
						message: '请输入新密码',
						trigger: ['blur']
					}]
				},
				roleId: getApp().globalData.roleId ? getApp().globalData.roleId : -1
			}
		},
		watch: {
			passwordPopup: function(val) {
				if (this.passwordPopup) {
					this.$nextTick(() => {
						this.$refs.uForm.setRules(this.rules);
					})

				}
			}
		},
		onReady() {

		},
		onLoad() {
			if (!localStorage.getItem('token')) {
				uni.reLaunch({
					url: '/pages/login/login'
				});
			}
			if (this.$cookies.isKey('alias')) {
				this.username = localStorage.getItem('alias');
			}
			this.tabbar = getApp().globalData.tabbar;

		},
		methods: {
			// 退出登录
			loginOut() {
				this.$u.api.logout().then(res => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				})
			},
			// 修改密码
			updatePassword() {
				this.passwordPopup = true;
				this.form = {}
			},
			// 确定修改密码
			sumbit() {

				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.form.confirmNewPassword == this.form.newPassword) {
							this.$u.api.updatePassword({
								oldPassword: this.$crypto.crypto.Encrypt(this.form.oldPassword),
								newPassword: this.$crypto.crypto.Encrypt(this.form.newPassword),
								userId:localStorage.getItem('userId')
							}).then(res => {
								this.$refs.uToast.show({
									title: "修改成功",
									type: 'success',
								})
								this.passwordPopup = false;
							})

						} else {
							this.$refs.uToast.show({
								title: "两次密码不一致！",
								type: 'error',
							})
						}

					}
				})
			},
			// 跳转到用户列表
			jumpUserList() {
				this.$u.route('/pages/user/userList/index');
			},
			// 跳转到发布发房源列表
			jumpreleaseList() {
				this.$u.route('/pages/user/hous/list', {
					type: 'release',
				});
			},
			// 跳转到下架发房源列表

			jumpHousList() {
				this.$u.route('/pages/user/hous/list', {
					type: 'shelf',
				});
			}
		}

	}
</script>
<style scoped>
	.f-52 {
		font-size: 52rpx;
	}

	.head {
		margin-bottom: 30rpx;
		text-align: center;
		padding: 50rpx 0;
		background-color: #76D7F0;
		background-size: 100% 100%;
	}

	.logout {
		margin-top: 50rpx;
	}

	.u-n-user {
		height: 80rpx;
		line-height: 80rpx;
	}

	.passwordFrom {
		width: 600rpx;
		padding: 30rpx;
		padding-top: 80rpx;
	}

	.content {
		margin: 30rpx;
	}

	.sumbit {
		margin: 40rpx 0;
	}
</style>
